<script setup lang="ts">
import { ref, onBeforeUnmount, onMounted, onUnmounted } from "vue";
import { FloatingBubble } from "vant";
import iconBack from "@/image/new_img/navv2_icon_back.png";
// import { HomeAxios } from "@/api/home.ts";
// import Pubsub from "pubsub-js";
//import { UserStore } from "@/store";
// import Pubsub from "pubsub-js";
// import { PubSubEnum } from "@/types";
// const userStore = UserStore();
const props = defineProps<{
  gameUrl: string;
}>();
const showRef = ref(false);
const showModal = () => {
  showRef.value = true;
};
const $emits = defineEmits(["closurePageGame"]);
//关闭游戏界面并查询分数和查询个人信息
const closeGamepage = () => {
  //userStore.getBalance();
  // Pubsub.publish(PubSubEnum.UPDATE_USERINFO);
  showRef.value = false;
  $emits("closurePageGame");
};
const myIframeRef = ref<HTMLIFrameElement | null>(null); // 定义 iframe 的类型;
const onIframeLoad = () => {
  if (
    localStorage.getItem("floatingBubble") &&
    localStorage.getItem("floatingBubble") !== "" &&
    localStorage.getItem("floatingBubble") !== "{}"
  ) {
    const floating = JSON.parse(localStorage.getItem("floatingBubble") as string);
    offset.value = floating;
  } else {
    offset.value = { x: 24, y: 24 };
  }
  console.log("Iframe===>load", offset.value);
};
// const onIframeError = () => {
//   console.error("Iframe 加载失败");
// };
const onIframeMessage = (evt: MessageEvent) => {
  const dataFromIframe: { name?: string; sender?: string } = evt.data || {};
  if (dataFromIframe.name === "closed" && dataFromIframe.sender === "game") {
    closeGamepage();
  }
};

onMounted(() => {
  if (myIframeRef.value) {
    // const iframe = myIframeRef.value as HTMLIFrameElement;
    // iframe.addEventListener("error", onIframeError);
    window.addEventListener("message", onIframeMessage);
  }
  if (
    localStorage.getItem("floatingBubble") &&
    localStorage.getItem("floatingBubble") !== "" &&
    localStorage.getItem("floatingBubble") !== "{}"
  ) {
    const floating = JSON.parse(localStorage.getItem("floatingBubble") as string);
    offset.value = floating;
  }
});
onBeforeUnmount(() => {
  // if (myIframeRef.value) {
  //   const iframe = myIframeRef.value as HTMLIFrameElement;
  //    iframe.removeEventListener("error", onIframeError);
  // }
  localStorage.setItem("floatingBubble", JSON.stringify(offsetChange.value));
});

const offset = ref({ x: 24, y: 24 });
const offsetChange = ref({});
const changexy = offset => {
  console.log("是什么", offset.x.toFixed(0), offset.y.toFixed(0));
  offsetChange.value = { x: offset.x.toFixed(0), y: offset.y.toFixed(0) };
};
onUnmounted(() => {
  window.removeEventListener("message", onIframeMessage);
});
defineExpose({ showModal, closeGamepage });
</script>
<template>
  <div v-if="showRef" class="game-page-frame">
    <div class="page-content">
      <!-- <img
        class="return-img"
        src="@/image/new_img/navv2_icon_back.png"
        @click.stop="closeGamepage"
      /> -->
      <FloatingBubble
        v-if="showRef"
        :offset="offset"
        axis="xy"
        :icon="iconBack"
        @click.stop="closeGamepage"
        @offset-change="changexy"
      >
        <template #default>
          <div class="iconBack-inner">
            <img :src="iconBack" width="24" />
          </div>
        </template>
      </FloatingBubble>
      <iframe
        class="iframe-frame"
        ref="myIframeRef"
        :src="showRef ? props.gameUrl : ''"
        @load="onIframeLoad"
      ></iframe>
    </div>
  </div>
</template>
<style lang="less" scoped>
.game-page-frame {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;

  .page-content {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    overflow: hidden;
  }

  .return-img {
    width: 78px;
    height: 78px;
    position: absolute;
    left: 20px;
    top: 80px;
    z-index: 20;
  }

  .iframe-frame {
    width: 100%;
    height: 100%;
    border: none;
  }

  .iframe-frame::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 和 Edge */
  }

  .page-content::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 和 Edge */
  }
}

.game-page-frame::-webkit-scrollbar {
  display: none;
  overflow: -moz-scrollbars-none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 和 Edge */
}

.iconBack-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
